<template>
    <div class="ClasslistB">
        <!--头部插槽-->
        <router-link 
                :to="{path:'/titList',query:{url:'/?method=flower.index.lessonList',title:data.title,order:data.order}}" 
                tag="h3">{{data.title}} 
            <span>更多<img src="../../assets/right.png" alt=""></span></router-link>
        <!--tab插槽-->
        <slot name="table"></slot>
        <!--列表插槽  旧-->
        <ul class="lists clearfix">
            <router-link 
                         tag="li" 
                         :to="{path:'/detail',query:{lession_id:item.lession_id,member_id:getMemberId(),prev:false}}" 
                         class="animated fadeIn" :style="{animationDelay:delay(index)}" 
                         v-for="(item,index) in data.list" 
                         :key="index">

                <!-- <img class="goodsImg" :src="item.lession_img" alt="">

                <div class="infos">
                    <h4 class="tit"><span class="end" v-if="item.is_complete">完结</span>{{item.lession_name}}</h4>
                    <p class="admin"><span>{{item.teacher_name}}</span><b>{{item.teacher_level}}</b>  </p>
                    <div class="other">
                        <span><i class="el-icon-view"></i>&#8197;{{item.lession_view}}</span>
                        <span><i class="el-icon-time"></i>&#8197;{{item.lession_num_hour}}课时</span>
                        <span v-if="item.lession_price>0"><strong>{{item.lession_price}}</strong>花瓣</span>
                        <span v-else><strong>免费</strong></span>
                    </div>
                </div> -->
                <base-list :item="item" class="renqi" />
            </router-link>
            <li class="nodataHome animated fadeIn" v-if="data.list && data.list.length<1"><img src="../../assets/huawa-off.png" alt="" /><p>暂无数据..</p></li>
        </ul>
    </div>
</template>

<script>
    import BaseList from '../../base/baseList.vue'
    export default {
        name: 'ClasslistB',
        components: {
            BaseList
        },
        data () {
            return {

            }
        },
        props:['data'],//父组件带过来的参数
        methods:{
            
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .ClasslistB {
        margin-top: .2rem;
        padding: 0 .16rem;
        background-color: #fff;
        /*标题*/
        h3{
            font-size: .3rem;
            color: #000;
            font-weight: bold;
            padding-top: .36rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span{
                float: right;
                color: #999999;
                font-size: .24rem;
            }
            img {
                width: .12rem;
                height: .24rem;
                margin-left: .06rem;
                position: relative;
                top: .02rem;
            }
        }
        /*无数据*/
        .nodataHome{
            margin: auto;
            float: none !important;
            padding-top: .6rem !important;
            img{
                width: 1.4rem;
                height: auto;
                display: block;
                font-size: 0;
                margin: auto;
            }
            p{
                text-align: center;
                font-size: .22rem;
                margin-top: .2rem;
            }
        }
        /*tab*/
        // .table{
        //     padding: .14rem 0 .16rem;
        //     li{
        //         float: left; 
        //         width: 20%;
        //         height: .5rem;
        //         line-height: .5rem;
        //         border: 1px solid #ccc;
        //         color: #666;
        //         text-align: center;
        //         margin-right: 5%;
        //         border-radius: .06rem;
        //         margin-bottom: .2rem;
        //         &:last-child{
        //             margin-right: 0;
        //         }
        //         &.on{
        //             background-color: #e7470e;
        //             border: 1px solid #e7470e; 
        //             color: #fff;
        //         }
        //     }
        // }
        .new_tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            margin: 0 -.16rem;
            padding: 0 .16rem;
            box-sizing: border-box;
            height: .88rem;
            line-height: .88rem;
            &.showNone {
                visibility: hidden;
            }
            &.showBlock {
                display: flex;
            }
            li {
                margin-right: .4rem;
                font-size: .24rem;
                &.active {
                    border-bottom: .04rem solid #de6940;
                    font-weight: bold;
                    color: #de6940;
                }
            }
        }
        .lists {
           .renqi {
               margin-top: .28rem;
           } 
        }
        /*产品列表*/
        // .lists{
        //     li{
        //         width: 49%;
        //         height: 4rem;
        //         padding: 0 0 .26rem;
        //         float: left;
        //         overflow-y: scroll;
        //         &:nth-of-type(2n){
        //             margin-left: 2%;
        //         }
        //         /*左侧图片*/
        //         .goodsImg{
        //             width: 100%;
        //             height: auto;
        //         }
        //         /*右侧信息*/
        //         .infos{
        //             /*标题*/
        //             .tit{
        //                 text-overflow: ellipsis;
        //                 overflow: hidden;
        //                 white-space: nowrap;
        //                 color: #333;
        //                 height: .34rem;
        //                 line-height: .34rem;
        //                 margin-top: .2rem;
        //                 span.end{
        //                     display: inline-block;
        //                     height: 100%;
        //                     font-size: .28rem;
        //                     padding: 0 .12rem;
        //                     border-radius: .06rem;
        //                     margin-right: .1rem;
        //                     color: #fff;
        //                     background-color: #e7470e;
        //                 }
        //             }
        //             /*老师*/
        //             .admin{
        //                 color: #777;
        //                 margin-top: .2rem;
        //                 font-size: .2rem;
        //                 display: flex;
        //                 justify-content: space-between;
        //                 span{
        //                     width: 49%;
        //                     text-overflow: ellipsis;
        //                     white-space: nowrap;
        //                     overflow: hidden;
        //                 }
        //                 b{
        //                     text-align: right;
        //                 }
        //             }
        //             /*其他*/
        //             .other{
        //                 width: 100%;
        //                 display: flex;
        //                 justify-content: space-between;
        //                 align-items: baseline;
        //                 font-size: .2rem;
        //                 margin-top: .2rem;
        //                 strong{
        //                     font-size: .28rem;
        //                     color: #e7470e;
        //                     font-weight: 600;
        //                     margin-right: .02rem;
        //                 }
        //             }
        //         }
        //     }
        // }
    }
</style>
